<!-- 会员界面 -->
<template>
	<s-layout title="会员" tabbar="/pages/index/memberCenter" class="withdraw-wrap" navbar="custom"
		:bgStyle="{ backgroundColor:'#f5f5f5'}">
		<view class="top-box ss-flex ss-col-center ss-row-between" :style="[
      {
        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
        paddingTop: Number(statusBarHeight + 188) + 'rpx',
      },
    ]">

			<view class="left-box ss-flex ss-col-center ss-m-l-36">
				<view class="avatar-box ss-m-r-24" @tap="sheep.$router.go('/pages/user/info')">
					<image class="avatar-img" :src="
			  isLogin && userInfo.avatar
			    ? sheep.$url.cdn(userInfo.avatar)
			    : sheep.$url.static('/static/img/shop/default_avatar.png')
			" mode="aspectFill"></image>
				</view>
				<view>
					<view class="nickname-box ss-flex ss-col-center" @tap="sheep.$router.go('/pages/user/info')">
						<view class="nick-name ss-m-r-20">{{ userInfo?.nickname || '请先登录' }}</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 开通合伙人套餐后，不显示这个 -->
		<view class="package-box" v-if="!isLogin || userInfo.level.level < 3">

			<view class="package-title-box">
				会员套餐
			</view>

			<view class="package-body-box">
				<!-- 开通vip套餐后，不显示这个 -->
				<view class="package-wrap-box" v-if="!isLogin || userInfo.level.level <= 1" :class="{'package-wrap-box-selected':selectPackageIndex==0}"
					@tap="onChangePackageIndex(0)">
					<view class="package-wrap-label">
						VIP会员
					</view>
					<view class="package-wrap-money-box">
						￥
						<view class="package-wrap-money">
							{{vipMoney}}
						</view>

					</view>

				</view>
				<view class="package-wrap-box" :class="{'package-wrap-box-selected':selectPackageIndex==1}"
					@tap="onChangePackageIndex(1)">
					<view class="package-wrap-label">
						合伙人
					</view>
					<view class="package-wrap-money-box">
						￥
						<view class="package-wrap-money">
							{{partnerMoney}}
						</view>

					</view>

				</view>
			</view>

			<button class="ss-reset-button save-btn ui-BG-Main-Gradient ss-m-t-60 ui-Shadow-Main" @tap="onConfirm">
				确认开通此套餐
			</button>
		</view>

		<view class="equity-box">
			<view class="equity-title-box">
				会员特权
			</view>
			
			 <view class="grid-container">
			    <view class="equity-item-wrap" v-for="(item, index) in currentFeatureList" :key="index">
			    	<uni-icons type="hand-up-filled" :size="30" color="#fc4141" />
			    	<view class="equity-item-content">
			    		<view class="equity-item-label">
			    			{{item.title}}
			    		</view>
			    		<view class="equity-item-desc">
			    			{{item.desc}}
			    		</view>
			    	</view>
			    </view>
			  </view>

		</view>



	</s-layout>
</template>

<script setup>
	import {
		computed,
		ref,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	 import UserApi from '@/sheep/api/member/user';
	 import OrderApi from '@/sheep/api/trade/order';
	 
	 // 隐藏原生tabBar
	 uni.hideTabBar();

	const userInfo = computed(() => sheep.$store('user').userInfo);
	 
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');

	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const vipMoney = ref('--')
	const partnerMoney = ref('--')
	
	// vip 特色
	const vipFeatureList = [
		{
			title: '所有分类',
			desc: '享受所有分类的商品'
		},
		{
			title: '淘创联合体社群',
			desc: '优享联合体优质社群'
		},
		{
			title: '永久会员',
			desc: '尊享永久会员'
		},
		{
			title: '推广分佣',
			desc: '享受推广分佣福利'
		}
	]
	//合伙人
	const parnterFeatureList =  [
		{
			title: '所有分类',
			desc: '享受所有分类的商品'
		},
		{
			title: '淘创联合体社群',
			desc: '优享联合体优质社群'
		},
		{
			title: '永久会员',
			desc: '尊享永久会员'
		},
		{
			title: '推广分佣',
			desc: '享受推广分佣福利'
		}
	]
	
	const currentFeatureList = ref(vipFeatureList)
	

	// 0 -vip  1--合伙人
	const selectPackageIndex = ref(0)
	if (unref(isLogin) && userInfo.value.level.level > 1) {
		selectPackageIndex.value = 1
		currentFeatureList.value = parnterFeatureList
	}
	
	onShow(() => {
		sheep.$store('user').updateUserData();
	});

	const onChangePackageIndex = (index) => {
		selectPackageIndex.value = index
		if (index == 0) {
			currentFeatureList.value = vipFeatureList
		} else {
			currentFeatureList.value = parnterFeatureList
		}
	}
	
	
	
	UserApi.getDictData('member_upgrade_money').then((res)=> {
		let info = res.data.find((item)=> item.value == 'vip')
		if(info) {
			vipMoney.value = info.label
		}
		info = res.data.find((item)=> item.value == 'partner')
		if(info) {
			partnerMoney.value = info.label
		}
	})

	// 确认开通会员	
	const onConfirm = () => {
		if (!unref(isLogin)) {
			sheep.$router.go('/pages/user/info')
			return
		}
		
		if(selectPackageIndex.value == 0) {
			OrderApi.createOrder({
			  items: [{
						skuId: 50,
						count: 1
					}],
			  // couponId: 0,
			  addressId: 64,
			  deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
			  pointStatus: false, // TODO 芋艿：需要支持【积分选择】
			}).then((res)=> {
				
				const { code, data } = res;
				if (code !== 0) {
				  return;
				}
				// 跳转到支付页面
				sheep.$router.go('/pages/pay/index', {
				  id: data.payOrderId,
				});
			})
			return 
		}
		
		// 合伙人
		if (selectPackageIndex.value == 1) {
			sheep.$router.go('/pages/chat/partnerQRCode')
			return
		}
	}

	onLoad(() => {});
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-input-input {
			font-family: OPPOSANS !important;
		}
	}

	.top-box {
		padding: 0 40rpx 80rpx;
		background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
		border-radius: 0 0 10% 10%;

		.avatar-box {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}

		.nick-name {
			font-size: 34rpx;
			font-weight: 400;
			color: #fff;
			line-height: normal;
		}
	}

	.package-box {
		padding: 40rpx 40rpx;
		background-color: #fff;

		.save-btn {
			margin-top: 60rpx;
			height: 86rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
		}
	}

	.package-title-box {
		padding-bottom: 30rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.package-body-box {
		display: flex;
		align-items: center;
		gap: 30rpx;

		.package-wrap-box {
			flex: 1;
			display: flex;
			gap: 20rpx;
			flex-direction: column;
			justify-content: center;
			background-color: #fff;
			padding: 60rpx 0;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
			/* 添加扩散阴影 */
			border-radius: 10rpx;
			cursor: pointer;


			.package-wrap-label {
				color: #333;
				font-weight: bold;
				font-size: 36rpx;
				text-align: center;
			}

			.package-wrap-money-box {
				color: #fc4141;
				text-align: center;
				font-weight: bold;


				.package-wrap-money {
					display: inline;
					font-size: 56rpx;

				}
			}
		}
		
		.package-wrap-box:hover {
			background-color: #fff;
		}

		.package-wrap-box-selected {
			border: 2px solid #fc414190;
			box-shadow: 0 0 40rpx rgba(252, 65, 65, 0.2);
			/* 初始阴影 */
			animation: blink-shadow 2s infinite;
			/* 应用动画 */
		}
	}

	.equity-box {
		margin-top: 40rpx;
		padding: 40rpx 40rpx;
		background-color: #fff;

		.equity-title-box {
			padding-bottom: 30rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.grid-container {
		  display: grid;
		  grid-template-columns: 1fr 1fr; /* 两列等宽 */
		  grid-template-rows: auto auto; /* 行高自适应内容 */
		  gap: 10px; /* 宫格之间的间隔 */
		}
		.equity-item-wrap {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			align-items: center;
			padding: 15px 10px;
			background-color: #f0f0f0;
			border-radius: 10rpx;
		}
		
		.equity-item-content {
			padding-left: 10px;
		}
		
		.equity-item-label {
			color: #333;
			font-weight: bold;
		}
		
		.equity-item-desc {
			color: #999;
		}
	}
	


	@keyframes blink-shadow {

		0%,
		100% {
			box-shadow: 0 0 40rpx rgba(252, 65, 65, 0.5);
		}

		50% {
			box-shadow: 0 0 10rpx rgba(252, 65, 65, 0.7);
		}
	}
</style>